<script setup lang="ts">
//语法糖
import {reactive, ref} from "vue";

let num: number = 100;

function getNum() {
  console.log(num)
}

// let name: string = '张三'
// ref实现响应式数据
let name = ref<string>('张三');

function changeName() {
  // name = '李四'
  console.log('changeName')
  console.log(name)
  // 获取时用 .value
  console.log(name.value)
  // name.value = '李四'
}

interface ObjType1 {
  name: string,
  age: number
}

let obj = ref<ObjType1>({
  name: '王五',
  age: 18
})

function changeObj() {
  console.log(obj.value)
  console.log(obj.value.age)
  obj.value.age++
}

// [{},{}]
interface ObjType2 {
  id: number,
  title: string
}

// let obj1=ref<ObjType2[]>([{id:1,title:'1'},{id:2,title:'2'},{id:3,title:'3'}]);
let obj2: ObjType2[] = [{id: 1, title: '1'}, {id: 2, title: '2'}, {id: 3, title: '3'}]

// reactive声明响应式的引用数据类型
interface DataType {
  msg: string
}

interface ObjType3 {
  sex: string,
  age: number,
  data: DataType
}

let obj1 = reactive<ObjType3>({
  sex: '男',
  age: 20,
  // 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
  data: {
    msg: '操作成功'
  }
})

// let str = reactive<boolean>('哈哈哈')

function changeObj1() {
  console.log(obj1)
  obj1.age++
  console.log(obj1.data.msg)
  obj1.data.msg = '操作失败'
}

let arr = reactive<number[]>([1, 2, 3])

function changeArr() {
  console.log(arr)
  arr[0] = 0
}
</script>

<template>
  index2
  {{ num }}--{{ name }}--{{ obj.age }}--{{ obj1.age }}--{{ obj1.data.msg }}--{{arr[0]}}
  <button @click="getNum">点击</button>
  <button @click="changeName">changeName</button>
  <button @click="changeObj">changeObj</button>
  <button @click="changeObj1">changeObj1</button>
  <button @click="changeArr">changeArr</button>
  <div class="box1">
    <div class="box2"></div>
  </div>
</template>

<style scoped lang="less">
@color: red;
.box1 {
  width: 300px;
  height: 200px;
  background-color: @color;

  .box2 {
    width: 100px;
    height: 100px;
    background-color: green;
  }
}
</style>
